<template>
  <div id="searchMenu">
    <el-form label-width="120px">
      <span v-if="option">
        <span v-for="(item,index) in option.items" :key="index" style="display:inline-block">
          <div v-if="item.type==='select'">
            <myselect :textLabel="item.label" :text="item.key" :enumKey='item.enumKey' :dicData='item.dicData' :isClear='isClear' @getData='getData'/>
          </div>
          <div v-else-if="item.type==='text'">
            <mytext :textType="item.type" :textLabel="item.label" :text="item.key" :isClear='isClear' @getData='getData'/>
          </div>
          <div v-else-if="item.type==='times'||item.type==='time'">
            <mytime :timeType="item.type==='time'" :textLabel="item.label" :text="item.key" :isClear='isClear' :clearable="item.clearable" @getData='getData' @searchChange='searchChange'/>
          </div>
          <div v-else>待开发</div>
        </span>
      </span>
      <span v-else>
        <span>
          <myselect v-for="(item,index) in selectArray" 
                                        :key='index' 
                                        :textLabel="item.label" 
                                        :text="item.key" 
                                        :enumKey='item.enumKey' 
                                        :dicData='item.dicData' 
                                        :isClear='isClear' 
                                        @getData='getData'/>
        </span>
        <span>
          <mytext v-for="(item,index) in textArray" 
                                        :key='index' 
                                        :textType="item.type" 
                                        :textLabel="item.label" 
                                        :text="item.key" 
                                        :isClear='isClear' 
                                        @getData='getData'/>
        </span>
        <span>
          <mytime v-for="(item,index) in timeArray" 
                                        :key='index' 
                                        :timeType="item.type==='time'" 
                                        :textLabel="item.label" 
                                        :text="item.key" 
                                        :isClear='isClear' 
                                        @getData='getData'
                                        @testevent='mytestevent'/>
        </span>
      </span>
      <div v-if="option.items.length" class="el-form-item" style="margin-bottom:25px;margin-left:120px;vertical-align: top;">
        <el-button type="primary" size="small" icon="el-icon-search" @click="searchChange">查 询</el-button>
        <el-button v-if="option.clearBtn" size="small" icon="el-icon-delete" plain @click="searchReset">清 空</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import mytext from '@/components/csearchbox/text'
import mytime from '@/components/csearchbox/time'
import myselect from '@/components/csearchbox/select'
export default {
  components:{
    mytext,myselect,mytime
  },
  props:{
    option:{
      type:Object,
      default:function(){
        return null
      }
    },
    textArray:{
      type:Array,
      default:function(){
        return []
      }
    },
    selectArray:{
      type:Array,
      default:function(){
        return []
      }
    },
    timeArray:{
      type:Array,
      default:function(){
        return []
      }
    },
  },
  data(){
    return {
      isClear:false,//是否清空搜索框，对子组件
      query:{},
    }
  },
  methods:{
    //从各小组件中获取数据
    getData(data,key){
      this.query[key]=data
      this.passQuery()
    },
    //将query传递回去
    passQuery(){
      let params={};
      for(let key in this.query){
        if(!this.query[key].type){
          if(this.query[key]){
            params[key]=this.query[key]
          }
        }
        // else if(this.query[key].type==='date'){
        //   if(this.query[key].val){
        //     params[key]=this.formatTime(this.query[key].val)
        //   }
        // }else if(this.query[key].type==='dates'){
        //   if(this.query[key].val.length){
        //     params[this.query[key].prop[0]]=this.formatTime(this.query[key].val[0])
        //     params[this.query[key].prop[1]]=this.formatTime(this.query[key].val[1])
        //   }
        // }
        else if(this.query[key].type==='decimal'){
          if(this.query[key].val){
            let val=parseInt(this.query[key].val*100)
            this.query[key].val=val/100+''
            params[key]=val
          }else{
            this.query[key].val=''
          }
        }
        else if(this.query[key].type==='fuzzy'){
          if(this.query[key].val){
            params[key]=this.query[key].val
          }
        }else if(this.query[key].type==='or'){
          if(this.query[key].val){
            params[this.query[key].key]=this.query[key].val
          }
        }
      }
      this.$emit('getQuery',params)
    },
    //查询按钮
    searchChange(){
      this.passQuery()
      this.$emit('searchPage')
    },
    //清空按钮
    searchReset(){
      this.isClear=!this.isClear
      for(let key in this.query){
        if(this.query[key].type){
          // if(this.query[key].type==='dates'){
          //   this.query[key].val=[]
          // }else 
          if(this.query[key].type==='fuzzy'){
            this.query[key].val=''
            this.query[key].desc=''
          }else if(this.query[key].type==='or'){
            this.query[key].val=''
            this.query[key].key=''
            if(this.houseOrCar){
              this.houses=[]
              this.cars=[]
              this.houseOrCars=[]
            }
          }else{
            this.query[key].val=''
          }
        }else{
          this.query[key]=''
        }
      }
      this.searchChange()
    },
  },
}
</script>

<style lang="scss">
#searchMenu {
  .el-form-item {
    display: inline-block;
    .el-input__suffix{
      height: 32px;
    }
  }
  .el-form-item__content {
    margin-right: 20px;
  }
}
</style>